{{ with .GolferInfo }}
    {{ $me := and $.Golfer (eq $.Golfer.ID .ID) }}

    <div class=grid id=profile>
        <img src="{{ avatar .AvatarURL 176 }}">
        <h1 title="{{ .Name }}{{ with .Pronouns.V }} ({{ . }}){{ end }}">
            {{ .Name }}
            {{ with .Pronouns.V }}<span id=pronouns>({{ . }})</span>{{ end }}
        {{ with .CountryFlag }}
            <span class=flag title="{{ .Name }}">{{ .Flag }}</span>
        {{ end }}
        </h1>
        <nav>
    {{ if $.Golfer }}
        {{ if $me }}
            <form action=/log-out method=post>
                <button class="btn red">{{ svg "sign-out-alt-light" }} Log Out</button>
            </form>
        {{ else if $.Golfer.IsFollowing .ID }}
            <form action="/golfers/{{ .Name }}/unfollow" method=post>
                <button class="btn red">{{ svg "person-dash" }} Unfollow Golfer</button>
            </form>
        {{ else }}
            <form action="/golfers/{{ .Name }}/follow" method=post>
                <button class="btn blue">{{ svg "person-plus" }} Follow Golfer</button>
            </form>
        {{ end }}
        {{ if $.Settings }}
            <button class="btn blue" data-dialog=settings-dialog title=Settings>
                {{ svg "gear-fill" }}
                Page Settings
            </button>
        {{ end }}
    {{ end }}
        </nav>
        <div>
            <div title="{{ comma .BytesPoints }} points in bytes">
                {{ svg "bytes" }}{{ comma .BytesPoints }}
            </div>
            •
            <div title="{{ comma .CharsPoints }} points in chars">
                {{ svg "chars" }}{{ comma .CharsPoints }}
            </div>
        </div>
        <div>
        {{ with .Unicorn }}
            <div title="{{ comma . }} unicorns (uncontested solves)">
                <span>🦄</span>{{ comma . }}
            </div>
            •
        {{ end }}
        {{ with .Diamond }}
            <div title="{{ comma . }} diamonds (uncontested gold medals)">
                <span>💎</span>{{ comma . }}
            </div>
            •
        {{ end }}
            <div title="{{ comma .Gold }} gold medals">
                <span>🥇</span>{{ comma .Gold }}
            </div>
            •
            <div title="{{ comma .Silver }} silver medals">
                <span>🥈</span>{{ comma .Silver  }}
            </div>
            •
            <div title="{{ comma .Bronze }} bronze medals">
                <span>🥉</span>{{ comma .Bronze  }}
            </div>
        </div>
    </div>

    {{ with .About }}<p id=about>{{ . }}{{ end }}

    <div id=badges>
    {{ if .Admin   }}<div><p>🔑<p class=orange>Admin  </div>{{ end }}
    {{ if .Sponsor }}<div><p>💰<p class=yellow>Sponsor</div>{{ end }}

    {{ with len .HolesAuthored }}
        <button data-dialog=holes-authored-dialog>
            <p>📚
            <p class=purple>{{ amount . "Hole" }} Authored
        </button>
    {{ end }}

    {{ with len .Referrals }}
        <button data-dialog=referrals-dialog>
            <p>📣
            <p class=purple>{{ amount . "Referral" }}
        </button>
    {{ end }}

        <div>
            <p>⛳
            <p class=red>{{ .Holes }} / {{ .HolesTotal }} Holes
        </div>
        <div>
            <p>🔣
            <p class=green>{{ .Langs }} / {{ .LangsTotal }} Langs
        </div>
        <div>
            <p>🏆
            <p class=blue>{{ len .Cheevos }} / {{ .CheevosTotal }} Cheevos
        </div>
        <div>
            <p>📅
            <p class=yellow>{{ time (.Started.In $.Location) }}
        </div>
    </div>

    <nav class=tabs>
        {{ $slug := print "/golfers/" .Name }}
        <a {{ if ne $.Path $slug }} href="{{ $slug }}" {{ end }}>Profile</a>

        {{ $slug = print "/golfers/" .Name "/cheevos" }}
        <a {{ if ne $.Path $slug }} href="{{ $slug }}" {{ end }}>Achievements</a>

        {{ $slug = print "/golfers/" .Name "/holes" }}
        <a {{ if not (hasPrefix $.Path $slug) }}
            href="{{ $slug }}/rankings/lang/bytes"
        {{ end }}>
            Holes
        </a>

    {{ if $me }}
        <a {{ if ne $.Path "/golfer/code-search" }} href=/golfer/code-search {{ end }}>
            Code Search
        </a>
        
        <a {{ if not (hasPrefix $.Path "/golfer/settings") }} href=/golfer/settings {{ end }}>
            Site Settings
        </a>
    {{ end }}
    </nav>

    {{ with .HolesAuthored }}
        <dialog id=holes-authored-dialog>
            <div>
                <h1>{{ amount (len .) "Hole" }} Authored</h1>
                <ul>
                {{ range . }}
                    <li>
                        <a href="/{{ .ID }}">
                            {{ svg .CategoryIcon }}
                            {{ .Name }}
                        </a>
                {{ end }}
                </ul>
            </div>
        </dialog>
    {{ end }}

    {{ with .Referrals }}
        <dialog id=referrals-dialog>
            <div>
                <h1>{{ amount (len .) "Referral" }}</h1>
                <ul>
                    {{ range . }}<li>{{ template "golfer-link" . }}{{ end }}
                </ul>
            </div>
        </dialog>
    {{ end }}
{{ end }}
